<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>管理系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" href="resource/bootstrap/css/bootstrap.min.css">
    <script src="resource/jquery/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="resource/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style1.css">
    <link rel="stylesheet" href="css/style2.css">
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f5f5f5;
        }

        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 240px;
            background-color: #343a40;
            padding: 20px 0;
            box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.2);
        }

        .sidebar a {
            display: block;
            color: #ccc;
            padding: 20px;
            text-decoration: none;
            transition: all 0.3s;
        }

        .sidebar a:hover {
            background-color: #007bff;
            color: #fff;
        }

        .container.custom-container {
            margin-left: 240px;
            padding: 45px;
        }

        .nav-links {
            position: relative; /* 添加此行使.dropdown-menu正确显示在.nav-links内 */
            margin-top: 10px;
        }

        /* 表格样式 */
        table {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            border-collapse: separate;
            border-spacing: 0;
        }

        th {
            background-color: #007bff;
            color: white;
            border-top: none;
        }

        th,
        td {
            padding: 1rem;
            border: solid 1px #999;
            position: relative;
        }

        td {
            background-color: #ffffff;
        }
        .sidebar-logo {
            width: 240px; /* 更改宽度以调整图像大小 */
            padding: 20px; /* 在周围添加一些填充 */
            display: block; /* 将图片显示为块级元素 */
            margin: 0 auto; /* 使图片水平居中 */
        }
        /*
        视频
         */
        #video-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: none;
            justify-content: center;
        }
/*
下拉框
 */
        .dropdown-menu {
            position: absolute;
            top: 50px; /* 调整弹出菜单距离顶部的距离 */
            left: 50px; /* 调整弹出菜单距离左侧的距离 */
            z-index: 100;
            width: 100%;
            background-color: #343a40;
            font-size: 17px;
            display: none;
        }

        .dropdown-menu a {
            display: block;
            padding: 8px 16px;
        }

        .dropdown-menu a:hover {
            background-color: #007bff;
            color: #fff;
        }
        .course-management-dropdown {
            top: 120px; /* 调整弹出菜单距离顶部的距离 */
        }


    </style>
</head>

<body>

<div class="sidebar">
    <img class="sidebar-logo" src="picture/mamba.png" alt="Logo">
    <a class="navbar-brand" href="#welcome" style="color: #fff; font-size: 18px">学生后台管理系统</a>
    <br><br><br><br>

    <div class="nav-links" style="font-size: 17px">
        <!-- 人员管理 -->
        <a href="#" style="cursor: pointer; color: #ccc;" class="personnel-management">
            <img src="picture/student.png" alt="学生管理Logo" style="width: 50px; height: 50px; vertical-align: middle;">
            人员管理
        </a>
        <div class="dropdown-menu personnel-management-dropdown">
            <a href="#students-table" class="dropdown-link">
                学生管理
            </a>
            <br>
            <a href="#teachers-table" class="dropdown-link">
                教师管理
            </a>
            <br>
            <a href="#avatars-table" class="dropdown-link">
                头像上传
            </a>
        </div>
<br>
        <!-- 课程管理 -->
        <a href="#" style="cursor: pointer; color: #ccc; margin-top: 10px;" class="course-management">
            <img src="picture/course.png" alt="课程管理Logo" style="width: 50px; height: 50px; vertical-align: middle;">
            课程管理
        </a>
        <div class="dropdown-menu course-management-dropdown">
            <a href="#courses-table" class="dropdown-link">
                课程管理
            </a>
            <br>
            <a href="#exam-schedule-table" class="dropdown-link">
               考试安排
            </a>
        </div>

          <br>
        <a href="#grades-table">
            <img src="picture/grade.png" alt="成绩管理Logo" style="width: 50px; height: 50px; vertical-align: middle;">
            成绩管理
        </a>

    </div>
</div>


<div class="container custom-container">
    <i class="fas fa-cog" style="position: absolute; top: 16px; right: 16px; font-size: 48px; cursor:pointer; z-index: 500;"></i>
    <div id="settings-nav" style="display: none; position: absolute; top: 56px; right: 16px; z-index: 500;">
        <ul class="settings-nav-list">
            <li><a href="#personal-info">个人信息更改</a></li>
            <li><a href="#file">教务文件上传</a></li>
            <li><a href="login.html">退出</a></li>
        </ul>
    </div>

    <div id="welcome">
        <div id="icons-container" style="display: flex; justify-content: center; margin-bottom: 15px;">
            <!-- 删除 `onclick="playVideo();"` -->
            <div class="icon" style="width: 120px; margin-right: 50px;">
                <a href="#" id="video-play-button">
                    <img src="picture/video.png" alt="介绍视频" style="width: 75px; height: 75px;" />
                    <p style="color: #007bff;">介绍视频</p>
                </a>
            </div>
            <div class="icon" style="width: 120px; margin-right: 50px; " >
                <img src="picture/system.png" alt="系统介绍" style="width: 75px; height: 75px;" />
                <p id="system-intro" style="color: #007bff;">系统介绍</p>
            </div>
            <div class="icon" style="width: 120px; margin-right: 50px;">
                <img src="picture/school.png" alt="学校介绍" style="width: 75px; height: 75px;" />
                <p id="school-intro" style="color: #007bff;">学校介绍</p>
            </div>
        </div>
        <h2><span id="welcome-username"></span>欢迎来到学生后台管理系统</h2>
        <p style="font-size: 20px">在这个系统中，您可以轻松地管理学生信息、课程信息和成绩信息。</p>
        <div id="carousel">
            <ul id="dots">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <!-- 学生表格容器 -->
    <div class="table-container" id="students-container"></div>
    <!-- 课程表格容器 -->
    <div class="table-container" id="courses-container"></div>
    <!-- 成绩表格容器 -->
    <div class="table-container" id="grades-container"></div>
    <!-- 教师容器 -->
    <div class="table-container" id="teachers-container"></div>
    <!-- 头像上传容器 -->
    <div class="table-container" id="avatars-container"></div>
    <!-- 考试安排表格容器 -->
    <div class="table-container" id="exam-schedule-container"></div>
    <!-- 个人信息更改容器 -->
    <div class="table-container" id="personal-info-container"></div>
    <!-- 教务文件更改容器 -->
    <div class="table-container" id="file-container"></div>

<!--视频-->
    <!-- 添加 'z-index' 和 'align-items:center;' -->
    <div id="video-container" style="display: none; z-index: 1000; align-items: center;">
        <video id="intro-video" width="840" height="560" style="margin: auto;">
            <source src="picture/mamba-video.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <button id="close-video">关闭视频</button>
    </div>
    <!-- 系统介绍模态框 -->
    <div id="systemModal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">系统介绍</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p style="font-size: 20px">曼巴学生后台管理系统是一款高度集成、强大且友好的在线管理平台，基于HTML、Bootstrap、JavaScript和SpringBoot等现代技术。系统致力于简化学校日常管理任务，涵盖学生、教师、课程和成绩的智能管理。此外，个性化的个人信息修改功能和便利的文件上传功能进一步增强了系统的实用性。而鲜明的科比设计元素和大幅轮播图使系统独具魅力。引人入胜的介绍视频为用户提供了快速而深入的了解。简而言之，曼巴学生后台管理系统为学校管理带来了革命性的变革，实现了高效、便捷和美观兼具的绝佳体验。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 学校介绍模态框 -->
    <div id="schoolModal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">学校介绍</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p style="font-size: 20px">牢大创建的曼巴学院，秉持着他独特的肘击哲学和极致拼搏精神。在这所学院中，学员们深入学习肘击技巧、强健等技能，全面提升运动表现。曼巴学院吸引了沙克、左巴杨和瓦妮莎等业界翘楚担纲教师，为学员提供卓越的指导和激励。

                        学院的标语 “what can I say, Mamba out“立足牢大的传承，表达了勇往直前的精神。此外，课程设置还融入了独特的文化元素，如学院的传世宝物——冰红茶，凝聚着曼巴学院的智慧与荣耀，为学员提供了心灵的滋养。

                        曼巴学院带给每一位学员的，不仅仅是身体技能与竞技智慧，还有对于挑战的勇敢面对和自我突破的信心。在这里，学员们将以牢大为榜样，勇攀高峰，锐意进取，致力于成为肘击与运动领域的优秀传奇，为曼巴精神注入无尽的生命力。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>



</div>
</body>
<script src="js/student.js"></script>
<script src="js/course.js"></script>
<script src="js/grade.js"></script>
<script src="js/exam.js"></script>
<script src="js/avatar.js"></script>
<script src="js/personal.js"></script>
<script src="js/teacher.js"></script>
<script src="js/file.js"></script>
<script type="text/javascript">


    $(document).ready(function () {
        // 显示和隐藏内容的函数
        function showHideContent(contentUrl, contentIdentifier, targetElement, callback) {
            if (contentUrl) {
                $.get(contentUrl, function (receivedContent) {
                    $(targetElement).html(receivedContent);
                    $("#welcome, .table-responsive").hide();
                    $(contentIdentifier).show();
                    if (callback) {
                        callback();
                    }
                });
            } else {
                $("#welcome, .table-responsive").hide();
                $(contentIdentifier).show();
            }
        }
        // 点击人员管理，显示人员管理下拉菜单
        $(".personnel-management").click(function () {
            $(".personnel-management-dropdown").slideToggle("slow");
        });

        // 隐藏人员管理下拉菜单，当菜单内的链接被点击时
        $(".personnel-management-dropdown .dropdown-link").click(function () {
            $(".personnel-management-dropdown").slideUp("slow");
        });

        // 点击课程管理，显示课程管理下拉菜单
        $(".course-management").click(function () {
            $(".course-management-dropdown").slideToggle("slow");
        });

        // 隐藏课程管理下拉菜单，当菜单内的链接被点击时
        $(".course-management-dropdown .dropdown-link").click(function () {
            $(".course-management-dropdown").slideUp("slow");
        });
        // 点击侧边栏的链接，显示相应的表格
        $(".nav-links, .settings-nav-list").on("click", "a", function (event) {
            const targetHref = $(this).attr("href");

            if (targetHref === "#students-table") {
                showHideContent("student-table.html", targetHref, "#students-container", bindStudentTableEvents);
                event.preventDefault();
            }
            else if (targetHref === "#teachers-table") {
                showHideContent("teacher-table.html", targetHref, "#teachers-container", bindTeacherTableEvents);
                event.preventDefault();
            } else if (targetHref === "#avatars-table") {
                showHideContent("avatar-table.html", targetHref, "#avatars-container", bindAvatarTableEvents);
                event.preventDefault();
            } else if (targetHref === "#courses-table") {
                showHideContent("course-table.html", targetHref, "#courses-container", bindCourseTableEvents);
                event.preventDefault();
            } else if (targetHref === "#grades-table") {
                showHideContent("grade-table.html", targetHref, "#grades-container", bindGradeTableEvents);
                event.preventDefault();
            }  else if (targetHref === "#exam-schedule-table") { // 新增
                showHideContent("exam-schedule.html", targetHref, "#exam-schedule-container", bindExamScheduleTableEvents);
                event.preventDefault();
            }else if (targetHref === "#personal-info") {
                showHideContent("personal-info.html", targetHref, "#personal-info-container", bindPersonalEvents);
                event.preventDefault();
            }else if (targetHref === "#file") {
            showHideContent("file.html", targetHref, "#file-container",bindFileTableEvents);
            event.preventDefault();
        }else if (targetHref !== "login.html") {
                showHideContent(null, targetHref, null);
                event.preventDefault();
            }
        });

        // 显示欢迎页面的点击事件
        $(".navbar-brand").click(function (event) {
            showHideContent(null, "#welcome", null);
            event.preventDefault();
        });

        // 初始化时显示欢迎页面
        showHideContent(null, "#welcome", null);
    });
//获取登录用户名
    $(document).ready(function () {
        $(".fa-cog").click(function () {
            $("#settings-nav").toggle();
        });
        // 获取登录的用户名
        const loggedInUsername = localStorage.getItem("loggedInUsername");

        if (loggedInUsername) {
            $("#welcome-username").text(loggedInUsername + "，");
        }

        // 查看系统介绍
        $("#system-intro").click(function () {
            $("#systemModal").modal("show");
        });

        // 查看学校介绍
        $("#school-intro").click(function () {
            $("#schoolModal").modal("show");
        });
    });
    //轮播图
    const carousel = document.getElementById('carousel');
    const images = carousel.getElementsByTagName('img');
    const dots = document.querySelectorAll('#dots li');

    let currentIndex = 0;
    const length = images.length;
    const interval = 1500;

    function updateDots() {
        dots.forEach(dot => dot.classList.remove('active'));
        dots[currentIndex].classList.add('active');
    }

    setInterval(() => {
        images[currentIndex].style.display = 'none';
        currentIndex = (currentIndex + 1) % length;
        images[currentIndex].style.display = 'block';
        updateDots();
    }, interval);

    dots.forEach((dot, index) => {
        dot.addEventListener('click', () => {
            if (currentIndex === index) return;
            images[currentIndex].style.display = 'none';
            currentIndex = index;
            images[currentIndex].style.display = 'block';
            updateDots();
        });
    });
//播放视频
    const videoContainer = document.getElementById('video-container');
    const introVideo = document.getElementById('intro-video');
    const closeVideo = document.getElementById('close-video');
    const videoPlayButton = document.getElementById('video-play-button');

    function playVideo(event) {
        event.preventDefault();
        videoContainer.style.display = "flex";
        introVideo.play();
    }

    function closeAndStopVideo() {
        videoContainer.style.display = "none";
        introVideo.pause();
        introVideo.currentTime = 0;
    }

    videoPlayButton.addEventListener("click", playVideo);
    closeVideo.addEventListener("click", closeAndStopVideo);


</script>
</html>